<template>
  <div id="container">
    <div id="output"></div>
  </div>
  <router-view />
  <div id="player"></div>
  <div class="footer">
    <a href="https://beian.miit.gov.cn/#/Integrated/index" class="link-btn" target="_blank">
      <span class="link-left">浙ICP</span>
      <span class="link-right link-red">备20014332号</span>
    </a>
    <a href="https://element-plus.gitee.io/" class="link-btn" target="_blank">
      <span class="link-left">ThemedBy</span>
      <span class="link-right link-blue">Element-Plus</span>
    </a>
  </div>
</template>

<style>
  /* https://emoji-css.afeld.me/ */
  @import './assets/css/emoji.css';

  #app {
    padding-bottom: 50px;
  }

  #player {
    background: transparent;
  }

  #player .aplayer-body {
    margin-bottom: 70px;
    overflow: hidden;
    transition: all .5s ease;
  }

  #player .aplayer-body .aplayer-pic {
    z-index: 100;
  }

  #player .aplayer-lrc {
    margin-bottom: 80px;
  }

  #player .aplayer-list {
    background-color: #fff;
    margin-bottom: 135px;
  }
</style>
<script>
  import Vector from '@/plugins/animate/vector.js'
  import '@fortawesome/fontawesome-free/css/all.css'
  import 'aplayer/dist/APlayer.min.css';
  import APlayer from 'aplayer';

  export default {
    data() {
      this.$nextTick(function () {
        this.$axios.get("/api/admin-service/music/getAllUsable").then((data) => {
          let musicArr = new Array();
          data.forEach((item, index) => {
            let music = {};
            music.artist = item.artist;
            music.name = item.name;
            music.url = item.musicUrl;
            music.cover = item.coverUrl;
            musicArr.push(music);
          });
          const ap = new APlayer({
            container: document.getElementById('player'),
            fixed: true,
            autoplay: false,
            listMaxHeight: '100px',
            audio: musicArr
          });
        }).catch(() => {});

        // 初始化 传入dom id
        var victor = Vector.Victor("container", "output");
        victor(["#ffffff", "#ffffff"]).set();
      })
      return {};
    }
  }
</script>

<style>
  #container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -999;
  }

  #output {
    width: 100%;
    height: 100%;
    z-index: -999;
  }
</style>